import React, { FC, useEffect } from 'react'
import { Checkbox, Form, Input, Space, Button } from 'antd'
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons'
import { nanoid } from 'nanoid'
import { QuestionCheckboxPropsType, QuestionCheckboxDefaultProps, OptionType } from './interface'

const PropComponent: FC<QuestionCheckboxPropsType> = (props: QuestionCheckboxPropsType) => {
    const [form] = Form.useForm()

    const {
        title = '',
        isVertical = false,
        list = [],
        onChange,
        disabled,
    } = { ...QuestionCheckboxDefaultProps, ...props }

    useEffect(() => {
        form.setFieldsValue({ title, isVertical, list })
    }, [title, isVertical, list])

    //   form变化的函数
    const handleOnValuesChange = () => {
        if (onChange == null) return
        // 触发onChange函数
        const newValues = form.getFieldsValue() as QuestionCheckboxPropsType
        // 为新增的选项value赋值
        const { list = [] } = newValues
        list.forEach(opt => {
            if (opt.value) return
            opt.value = nanoid(5)
        })
        onChange(newValues)
    }

    return (
        <Form
            layout="vertical"
            onValuesChange={handleOnValuesChange}
            initialValues={{ title, isVertical, list }}
            form={form}
            disabled={disabled}
        >
            <Form.Item
                label="标题"
                name="title"
                rules={[{ required: true, message: '请输入标题内容' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="多选项">
                <Form.List name="list">
                    {(fields, { add, remove }) => (
                        <>
                            {/* 遍历所有options选项进行展示 */}
                            {fields.map(({ key, name }, index) => {
                                return (
                                    <Space key={key} align="baseline">
                                        {/* 当前选项是否选中 */}
                                        <Form.Item name={[name, 'checked']} valuePropName="checked">
                                            <Checkbox></Checkbox>
                                        </Form.Item>

                                        {/* 当前选项输入框 */}
                                        <Form.Item
                                            name={[name, 'text']}
                                            rules={[
                                                { required: true, message: '请输入选项文字' },
                                                {
                                                    validator: (_, text) => {
                                                        const { list = [] } = form.getFieldsValue()
                                                        let num = 0
                                                        list.forEach((l: OptionType) => {
                                                            // 记录text相同的个数，预期只有一个，就是当前输入框自己
                                                            if (l.text === text) num++
                                                        })
                                                        if (num === 1) return Promise.resolve()
                                                        return Promise.reject(
                                                            new Error(
                                                                '与其他选项内容重复，请修改！'
                                                            )
                                                        )
                                                    },
                                                },
                                            ]}
                                        >
                                            <Input placeholder="请输入选项文字……" />
                                        </Form.Item>
                                        {/* 当前选项的删除按钮 */}
                                        {index > 0 && (
                                            <MinusCircleOutlined onClick={() => remove(name)} />
                                        )}
                                    </Space>
                                )
                            })}
                            {/* 添加选项 */}
                            <Form.Item>
                                <Button
                                    type="link"
                                    onClick={() => add({ value: '', text: '', checked: false })}
                                    icon={<PlusOutlined />}
                                    block
                                >
                                    添加选项
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form.Item>
            <Form.Item name="isVertical" valuePropName="checked">
                <Checkbox>是否竖向排列</Checkbox>
            </Form.Item>
        </Form>
    )
}
export default PropComponent
